window.onload = function () {
  // 等待DOM加载完成再执行以下JS代码
  console.log(province);
  // 获取DOM
  var selAddr = document.getElementsByClassName("selected-addr")[0],
    prov = document.getElementById("province"),
    city = document.getElementById("city"),
    area = document.getElementById("area"),
    btnGetAddr = document.getElementsByClassName("btn-getaddr")[0];
  // 定义变量用于存放地址选择的结果
  var address = {
    province: "",
    city: "",
    area: "",
  };

  // 动态加载省份
  for (var i = 0, len = province.length; i < len; i++) {
    var el = document.createElement("option");
    el.innerText = province[i].name;
    el.value = i;
    // value存储省份的下标
    prov.appendChild(el);
  }

  // 改变省份时加载对应的城市数据
  prov.onchange = function () {
    // 清空选择框中已显示的上次选择的地址
    selAddr.value = "";
    // 先清空当前city中的全部option再进行添加
    city.innerHTML = "<option disabled selected>选择市</option>";
    // 省改变时区县也要清空
    area.innerHTML = "<option disabled selected>选择区/县</option>";
    // 遍历添加城市
    // console.log(this.value);
    for (var i = 0, len = province[this.value].city.length; i < len; i++) {
      var cit = document.createElement("option");
      cit.innerText = province[this.value].city[i].name;
      // value存储市的下标
      cit.value = i;
      city.appendChild(cit);
    }
    // 三个onchange事件嵌套  将当前选择的省份暂存 便于后面操作
    var selectProv = province[this.value];
    // 将选择的省份存入address中
    address.province = province[this.value].name;
    // console.log(address);

    // 根据省份和选择的市动态加载区县
    city.onchange = function () {
      // 清空选择框中已显示的上次选择的地址
      selAddr.value = "";
      // 先清空
      area.innerHTML = "<option disabled selected>选择区/县</option>";
      // 不使用事件嵌套时采用以下代码获取数据
      // 获取市对应省份的下标
      // var provIndex = prov.value;
      // console.log(provIndex);
      // 获取当前选择的城市的下标
      // var cityIndex = this.value;
      // 或 var cityIndex = city.value
      // console.log(cityIndex);
      // var areas = province[provIndex].city[cityIndex].districtAndCounty;
      var areas = selectProv.city[this.value].districtAndCounty;
      // for (var i = 0, len = areas.length; i < len; i++) {
      for (var i in areas) {
        var are = document.createElement("option");
        are.innerText = areas[i];
        are.value = i;
        area.appendChild(are);
      }
      // 三个onchange事件嵌套  将当前选择的市暂存 便于后面操作
      var selectArea = selectProv.city[this.value];
      // 将选择的市存入address中
      address.city = selectArea.name;
      // console.log(address);

      area.onchange = function () {
        // 清空选择框中已显示的上次选择的地址
        selAddr.value = "";
        // 将选择的区县存入address中
        address.area = areas[this.value];
        console.log(address);

        // 将选择的地址信息写入文本框中
        // 如果选择的省 市 区县 都不为空时，按钮状态可用
        if (
          address.province != "" &&
          address.city != "" &&
          address.area != ""
        ) {
          btnGetAddr.removeAttribute("disabled");
          btnGetAddr.disable = false;
        }

        // 如果提交按钮可用 就将数据显示在文本框中
        if (btnGetAddr.disable == false) {
          btnGetAddr.onclick = function () {
            var text = address.province + "-";
            text += address.city + "-";
            text += address.area;
            console.log(text);
            // 添加数据
            selAddr.value = text;
          };
        }
      };
    };
  };
};
